<template>
  <div class="box">
    <!-- <header class="header">首页头部</header> -->
    <div class="content">
      <!-- 固定定位图标 -->
      <div class="ico" @click="show = true" v-if="!show"></div>
      <!-- 头部背景 -->
      <div class="header">
        <router-link to="/switchAccount" tag="span">切换账号</router-link>
      </div>
      <!-- 头像名字部分 -->
      <div class="baby">
        <!-- 头像左侧 -->
        <div class="left">
            <span>Kimi</span>
            <img class="sex" src="/img/home/boy.png" alt="">
          <p>宝宝今天一岁生日了</p>
        </div>
        <!-- 头像 -->
        <img src="/img/home/headphoto.png" alt="">
      </div>
      <!-- 三个导航按钮 -->
      <div class="nav">
        <router-link class="nav_list" to="/growthrecord" tag="div">
          <img src="/img/home/fill1.png" alt="">
          <p>成长记录</p>
        </router-link>
        <router-link class="nav_list" to="/note" tag="div">
          <img src="/img/home/fill2.png" alt="">
          <p>宝宝日记</p>
        </router-link>
        <router-link class="nav_list" to="/menu" tag="div">
          <img src="/img/home/fill3.png" alt="">
          <p>疫苗接种</p>
        </router-link>
      </div>
      <!-- 内容区域 -->
      <div class="section">
        <div class="section-top">
          <p>
            <img src="/img/home/icons_circle.png" alt="">
          <span>今天</span>
          </p>
          <p>
            第<span>365</span>天
          </p>
        </div>
        <div class="section-bot">
          <div class="data">
            内容区
          </div>
        </div>
      </div>
      <div class="section">
        <div class="section-top">
          <p>
            <img src="/img/home/icons_circle.png" alt="">
          <span>今天</span>
          </p>
          <p>
            第<span>365</span>天
          </p>
        </div>
        <div class="section-bot">
          <div class="data">
            内容区
          </div>
        </div>
      </div>
    </div>
    <!-- 按钮弹出层页面 -->
    <van-overlay :show="show" >
      <div class="wrapper">
        <div class="block">
          <h1>记录宝宝一点一滴</h1>
          <div class="nav">
            <router-link class="nav_list" to="/menu" tag="div">
              <img src="/img/home/fill1.png" alt="">
              <p>身高体重</p>
            </router-link>
            <router-link class="nav_list" to="/addnote" tag="div">
              <img src="/img/home/fill2.png" alt="" >
              <p>宝宝日记</p>
            </router-link>
          </div>
          <img src="/img/home/icon_wrong.png" alt="" @click="show = false">
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import Vue from 'vue'
import { Overlay } from 'vant'

Vue.use(Overlay)
export default {
  data () {
    return {
      show: false // 弹出层开关
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
  .ico {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    position: fixed;
    right: .34rem;
    bottom: 1rem;
    z-index: 2;
    background-color: white;
    background-image: url('/img/home/icons_compile.png');
    background-size: 100%;
  }
  .content {
    // 头部背景
    position: relative;
    .header {
      @include rect(100%,1.93rem);
      background: url('/img/home/background.png') no-repeat center;
      background-size: 100%;
      position: relative;
      // 切换账号按钮
      span {
        font-size: .12rem;
        font-weight: bold;
        color: #FFFFFF;
        position: absolute;
        right: .12rem;
        top:.36rem;
      }
      span:hover {
        cursor: pointer;
      }
    }
    // 宝宝信息
    .baby {
      @include rect(100%,1.2rem);
      @include flexbox();
      @include justify-content(flex-end);
      position: absolute;
      top: 1.2rem;
      .left {
        width: 2.5rem;
        height: 1.2rem;
        text-align: right;
        span {
          display: inline-block;
          font-size: .18rem;
          line-height: .18rem;
          margin-top: .49rem;
          margin-right: 0.08rem;
          margin-bottom: .19rem;
          color:white;
        }
        p {
          font-size: .13rem;
          line-height: .13rem;
        }
        .sex {
          width: .08rem;
          height: .12rem;
        }
      }
      img {
        width: 1.2rem;
        height: 1.2rem;
      }
    }
    // 导航按钮
    .nav {
      @include flexbox();
      @include justify-content(space-around);
      @include margin(.64rem 0 .34rem 0);
      .nav_list {
        cursor: pointer;
        p {
          text-align: center;
          font-weight: bold;
          font-size: .1rem;
        }
        img {
          width: .71rem;
          height: .71rem;
        }
      }
      .nav_list:nth-child(1) p {
        color: #56D3DC;
      }
      .nav_list:nth-child(2) p {
        color: #FFCD00;
      }
      .nav_list:nth-child(3) p {
        color: #ACAAEF;
      }
    }
    // 主内容区域
    .section {
      .section-top {
        @include flexbox();
        @include justify-content(space-between);
        @include padding(0 .22rem);
        line-height: .2rem;
        text-align: center;
        img {
          width:.15rem;
          height: .15rem;
        }
        p:nth-child(1){
          @include flexbox();
          @include align-items();
          height: .2rem;
          span {
            font-size: .16rem;
            font-weight: bold;
            @include margin(0 0 0 .09rem);
          }
        }
        p:nth-child(2){
          font-size: .13rem;
          font-weight: bold;
          span {
            font-size: .19rem;
            color:#33DCDE;
          }
        }
      }
      .section-bot {
        @include rect(100%,auto);
        @include margin(.1rem 0 .1rem .27rem);
        // @include margin(0 0 0 .27rem);
        @include padding(0.1rem .22rem 0.23rem .16rem);
        border-left: .015rem solid #FCCE00;
        .data {
          @include padding(.1rem);
          //有内容时需要把高度取消
          @include rect(3rem,100px);
          box-shadow:0px 0px 15px 0px rgba(85,85,85,0.15);
          border-radius:12px;
        }
      }
    }
  }
  // 弹出层样式
.wrapper {
  width: 100%;
  height: 100%;
}

.block {
  width: 100%;
  height: 100%;
  background-color: #fff;
  @include padding(2.58rem 0 0 0);
  h1 {
    font-size: .16rem;
    font-weight: bold;
    @include margin(0 0 .64rem 0);
    text-align: center;
  }
  img {
    display: block;
    margin: 0 auto;
    width: .16rem;
    height: .16rem;
  }
  .nav { //两个导航样式
    @include flexbox();
    @include justify-content(center);
    .nav_list {
      cursor: pointer;
      margin-bottom: .54rem;
      p {
        text-align: center;
        font-weight: bold;
        font-size: .1rem;
      }
      img {
        width: .71rem;
        height: .71rem;
      }
    }
    .nav_list:nth-child(1) {
      margin-right: .95rem;
      color: #56D3DC;
    }
    .nav_list:nth-child(2) p {
      color: #FFCD00;
    }
  }
}
</style>
